import { createApp,toRaw } from 'vue'
import App from './App.vue'
import 'animate.css/animate.min.css' //引入动画
import route from './router'
import ElementPlus from 'element-plus'//引入饿了么组件
import 'element-plus/dist/index.css'//引入elm样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'//引入饿了么图标
import './utils/css/normalize.css' //样式重置初始化
import './utils/css/Styles.css' //样式重置初始化
import Card from './components/Card/index.vue'//全局组件
import mitt from 'mitt'
import loading from './components/loading'
import noneCom from './components/404'
import { Filter, lod, nCom } from './utils/js/type'//type类型文件
import './utils/css/tailwind/tailwind.css'//tailwinCss引入
import {createPinia,PiniaPluginContext} from 'pinia'//引入pinia
import 'uno.css'
import 'default-passive-events'

// import VueParticles from 'vue-particles'
const Mit = mitt()
//初始化pinia仓库和pinia持久化
const setStorage = (key:string,value:any)=>{
localStorage.setItem(key,JSON.stringify(value))
}
const getStorage = (Key:string)=>{
  return localStorage.getItem(Key) ? JSON.parse(localStorage.getItem(Key)as string) :{}
}

type piniaOptions = {
  key?:string
}
const __piniaKey = 'fuheng'
const store = createPinia()
const PiniaPlugin = (Options: piniaOptions)=>{
  return (Context: PiniaPluginContext)=>{
   const { store } = Context
    const piniaData = getStorage(`${Options?.key ?? __piniaKey}-${store.$id}`)  
   store.$subscribe(() => {
     setStorage(`${Options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state) )
   })
   return {
    ...piniaData
   }
 }
}

declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus:typeof Mit
  }
}
const app = createApp(App)
//路由，element组件
app.component('Card', Card).use(route).use(ElementPlus)
//注入pinia仓库
store.use(PiniaPlugin({
  key:'pinia'
}))
app.use(store)
//注册全局组件
app.use(loading).use(noneCom)
//Bus 兄弟传参
app.config.globalProperties.$Bus = Mit
//声明模块 不然编辑报错

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $filters: Filter,
    _loading:lod
    _noneCom:nCom
  }
}





//挂载全局函数
app.config.globalProperties.$filters = {
  format<T>(str:T):string{
    return `修饰符${str}`
  }
}
app.mount('#app')
//element组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
